{% extends "base.html" %}
{% block head %}
<script src="http://192.168.0.186/static/js/echarts.js"></script>
<script src="http://192.168.0.186/static/map/js/china.js"></script>
<script src="http://192.168.0.186/static/js/common.js"></script>
{% endblock %}

{% block title %}Order{% endblock %}


{% block content %}
<div class="row">
	<div class="col-md-2">
		<div class="row">
		  <form action="{% url 'show_order' %}" method="get">
			<ul class="list-group">
			  <li class="list-group-item"><label>开始日期</label><input type="date" class="form-control" id="begin_date" name="begin_date" value="{% if begin_date %}{{ begin_date }} {% endif %}"/></li>
			  <li class="list-group-item"><label>结束时间</label><input type="date" class="form-control" id="end_date" name="end_date" value="{% if end_date %}{{ end_date }} {% endif %}"/></li>
			  <li class="list-group-item"><label>客户</label><br/>
			  	 <input type="checkbox" /> 客户1<br/>
			  	 <input type="checkbox" /> 客户2<br/>
			  	 <input type="checkbox" /> 客户3<br/>
			  </li>
			  <li class="list-group-item"><label>类目</label><br/>
			  	 <input type="checkbox" /> 类目1<br/>
			  	 <input type="checkbox" /> 类目2<br/>
			  	 <input type="checkbox" /> 类目3<br/>
			  </li>
			  <li class="list-group-item"><label>刷新频率(S)</label><input type="number" class="form-control" id="frequence" value="{{ frequence }}"/></li>
			  <li class="list-group-item"><button type="submit" class="btn-info">筛选</button></li>
			</ul>
		  </form>
		</div>
	</div>
    <div class="col-md-4">
        <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
        <div class="row">
        	<div id="main" style="height:400px;"></div>
        	<div id="pie" style="height:400px;"></div>
    	</div>
    </div>

    <div class="col-md-6">

    	<div class="row">
    		<div class="col-md-3 bg-info">
    			<p class="text-left">总额:</p>
    			<h3>60078877  <small>3.5% <span class="glyphicon glyphicon-triangle-top"></span> </small></h3>
    		</div>
    		<div class="col-md-3 bg-warning">
    			<p class="text-left">订单量:</p>
    			<h3>4011  <small>3.5% <span class="glyphicon glyphicon-triangle-top"></span> </small></h3>
    		</div>
    		<div class="col-md-3 bg-success">
    			<p class="text-left">利润:</p>
    			<h3>60078  <small>3.5% <span class="glyphicon glyphicon-triangle-top"></span> </small></h3>
    		</div>
    		<div class="col-md-3 bg-danger">
    			<p class="text-left">平均客单量:</p>
    			<h3>600  <small>3.5% <span class="glyphicon glyphicon-triangle-top"></span> </small></h3>
    		</div>
    	</div>

    	<div class="row">
    		<div id="map" style="height:724px;"></div>
    	</div>
    	
    </div>

</div>

<div class="row">
	<div class="col-md-6">
		
	</div>
</div>
{% endblock %}


{% block script %}

<script type="text/javascript">

        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据
        myChart.setOption({
            backgroundColor: '#2c343c',
            textStyle: {
                color: 'rgba(255, 255, 255, 0.3)',
            },
            title: {
                textStyle: {
                    color: 'rgba(255, 255, 255, 0.3)'
                },
                text: '客户订单'
            },
            tooltip : {
                trigger: 'axis'
            },
            toolbox: {
                show : true,
                feature : {
                    mark : {show: true},
                    dataView : {show: true, readOnly: false},
                    saveAsImage : {show: true},
                    dataZoom: {show: true},
                    restore: {show: true},
                    magicType: {
                    	show:true,
                    	type: ['bar', 'line'],
                    },
                }
            },
            calculable : true,
            legend: {
                textStyle: {
                    color: 'rgba(255, 255, 255, 0.3)'
                },
                data:['总额']
            },
            xAxis: {
                data: []
            },
            yAxis: {},
            series: [{
                name: '总额',
                type: 'bar',
                data: [],
                markLine : {
                    data : [
                        {type : 'average', name : '平均值'}
                    ]
                },
                markPoint : {
                    data : [
                        {type : 'max', name: '最大值'},
                        {type : 'min', name: '最小值'}
                    ]
                },
                }

            ]
        })

       
        var myChart2 = echarts.init(document.getElementById('pie'));
        myChart2.setOption({
        	backgroundColor: '#2c343c',
            textStyle: {
                color: 'rgba(255, 255, 255, 0.3)',
            },
            title : {
            	textStyle: {
                    color: 'rgba(255, 255, 255, 0.3)'
                },
                text: '订单数量',
                x:'center'
            },
            tooltip : {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: {
            	textStyle: {
                    color: 'rgba(255, 255, 255, 0.3)'
                },
                orient: 'vertical',
                right: 10,
                top: 20,
                bottom: 20,
                data: []
            },
            series : [
                {
                    name: '客户订单',
                    type: 'pie',
                    selectedMode: 'single',
                    radius: [0, '40%'],
                    data: [],
                    label: {
                        normal: {
                           position: 'inner'
                        }
                    },
                    labelLine: {
                    	normal: {
                    	    show: false
                    	}
                    },
                    itemStyle: {
                        emphasis: {
                            shadowBlur: 5,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                },
                {
                    name:'订单状态',
                    type:'pie',
                    radius: ['50%', '65%'],
                    label: {
                        normal: {
                            //formatter: '{a|{a}}{abg|}\n{hr|}\n  {b|{b}：}{c}  {per|{d}%}  ',
                            formatter: '{b|{b}：}{c}  {per|{d}%}  ',
                            backgroundColor: '#2c343c',
                            borderColor: '#aaa',
                            borderWidth: 1,
                            borderRadius: 4,
                            rich: {
                                // a: {
                                //     color: '#999',
                                //     lineHeight: 22,
                                //     align: 'center'
                                // },
                                // hr: {
                                //     borderColor: '#aaa',
                                //     width: '100%',
                                //     borderWidth: 0.5,
                                //     height: 0
                                // },
                                b: {
                                    fontSize: 16,
                                    lineHeight: 33
                                },
                                per: {
                                    color: '#eee',
                                    backgroundColor: '#334455',
                                    padding: [2, 4],
                                    borderRadius: 2
                                }
                            }
                        }
                    },
                    data:[]
                }
            ]
        });
         var get_url = 'api_show_data'

         {% if begin_date %}
         	get_url += '?begin_date={{ begin_date }}'
         	{% if end_date %}
         	  get_url += '&end_date={{ end_date }}'
         	{% endif %}
         {% endif %}
         
         $.get(get_url).done(function (response) {
        	var data = response.data
        	//console.log(data)
            // 填入数据
            myChart.setOption({
            	title: {
            	    subtext: '总金额：' + data.total,
            	},
                xAxis: {
                    data: data.companys
                },
                series: [{
                    // 根据名字对应到相应的系列
                    name: '总额',
                    data: data.total_price
                }]
            });

            // 填入数据
            myChart2.setOption({
            	title: {
            	    subtext: '总订单量：' + data.total_order,
            	},
                legend: {
                    data: data.companys
                },
                series: [
                  {
                    // 根据名字对应到相应的系列
                    name: '客户订单',
                    data: data.orders_by_companys
                  },
                  {
                    // 根据名字对应到相应的系列
                    name: '订单状态',
                    data: data.orders_by_states
                  },

                ]
            });

        });


        //测试数据
function randomData() {
    return Math.round(Math.random()*1000);
}

option3 = {
	textStyle: {
	    color: 'rgba(255, 255, 255, 0.3)',
	},
    title: {
    	textStyle: {
    	    color: 'rgba(255, 255, 255, 0.3)',
    	},
        text: '类目销量',
        left: 'center'
    },
    tooltip: {
        trigger: 'item'
    },
    legend: {
    	textStyle: {
    	    color: 'rgba(255, 255, 255, 0.3)',
    	},
        orient: 'vertical',
        left: 'left',
        data:[]
    },
    visualMap: {
    	textStyle: {
    	    color: 'rgba(255, 255, 255, 0.3)',
    	},
        min: 0,
        max: 10000,
        left: 'left',
        top: 'bottom',
        text: ['高','低'],           // 文本，默认为数值文本
        calculable: true
    },
    backgroundColor: '#2c343c',

    toolbox: {
        show: true,
        orient: 'vertical',
        left: 'right',
        top: 'center',
        feature: {
            saveAsImage: {}
        }
    },

};
        var myChart3 = echarts.init(document.getElementById('map'));
        myChart3.setOption(option3)

        function gene_category_series(data) {
        	var serie = [];
        	var category = data.category
        	    for(var i = 0; i < category.length; i++){
        	        var item = {
        	            name:category[i],
        	            type: 'map',
        	            mapType: 'china',
        	            label: {
                            normal: {
                                show: true
                            },
                            emphasis: {
                                show: true
                            }
                        },
        	            data: data[category[i]]
        	        }
        	        serie.push(item);
        	    }

        	 serie.push({
	            type:'pie',
	            roseType: 'angle',
	            center:['50%','15%'],
	            radius:[0,50],
	            data:data.price,
	            itemStyle: {
	                emphasis: {
	                    shadowBlur: 5,
	                    shadowOffsetX: 0,
	                    shadowColor: 'rgba(0, 0, 0, 0.5)'
	                }
	            }

        	})
        	return serie;
        }

        $.get('api_show_c_data').done(function (response) {
        	var data = response.data
        	//console.log(data)
            // 填入数据
            myChart3.setOption({
            	legend: {
                    data: data.category
                },
                title: {
        	    	subtext:'总数量：' + data.total_num,
        	    },
                series: gene_category_series(data)
            });

        });

        setTimeout(function (){
            window.onresize = function () {
                myChart.resize();
                myChart2.resize();
                myChart3.resize();
            }
        },200)

    </script>
{% endblock %}